<template>
	<view class="pages">
		<view class="bg"
			style="background-image: url('https://ctrlsoft.net.cn/app_static/hesaid//img/wshing/Slice.png');display: flex;align-items: center;background-repeat: no-repeat;">
			<view class="">
					<uni-icons custom-prefix="back" type="back" size="30" color="white" @tap='Black'></uni-icons>
			</view>
		</view>
		<view class="second">
			<view class="box">
				<view class="box_center">
					<view class="bod">
						<image class="box_img"
							:src="obj.expertAvatar !=null ? obj.expertAvatar : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'"
							mode="aspectFill"></image>
					</view>
<!-- 					<view class="">
						<view class="guanzhu" @click="Follows">
							关注
						</view>
					</view> -->
				</view>
				<view class="box_font">
					<text class="font_text">{{obj.expertName}}</text>
					<!-- <img src="" alt=""> -->
					<view class="fonst_l">
						 {{obj.expertBriefIntroduction != null ? obj.expertBriefIntroduction : '这家伙很懒，什么都没有写~'}}   
					</view>
				</view>
				<view class="box_footer">
<!-- 					<text class="fensi" style="display:none">
						<text class="num">12</text> <text class="ft">粉丝</text>
					</text> -->
					<text class="haop">
						<text class="num">{{obj.acclaim}}</text> <text  class="ft">好评/人</text>
					</text>
					<text class="zixun">
						<text class="num">{{obj.consultantDuration}}</text>  <text  class="ft">最近咨询/分钟</text>
					</text>
				</view>
			</view>
			<view class="footer">
				
				<view class="">
					<van-tabs :active="active" color="#FF9839" class="vans"  @change="onChanges" >
						<van-tab v-for="(item,idx) in arr" :key="idx" :title="item" ></van-tab>
					</van-tabs>
				</view>
				<view v-if="dataLoaded">
					<mesg v-if="active == 0" :msgdata="obj"></mesg>
				</view>
				
				<tiezi v-if ="active == 1"></tiezi>
				
			</view>
		</view>
	
	</view>
</template>

<script>
	import {queryById} from '@/utils/OnetoOneaApi.js'
	import {imgBaseUrl,baseURL} from '@/utils/baseUrl.js'
	import mesg from '../Onedetail/component/messge.vue'
	import tiezi from '../Onedetail/component/tiezi.vue'
	export default {
		components:{
			mesg,tiezi
		},
		data() {
			return {
				id: '',
				link:'',
				bg: imgBaseUrl + '/img/wshing/Slice.png',
				// arr:['咨询信息','帖子'],
				arr:['咨询信息'],
				active: 0, // tab选择
				obj:{},
				 dataLoaded: false, // 根据此变量来控制是否显示子组件
				icons:imgBaseUrl + '/img/missimg/xiangzuojiantou.svg',
				consultId:'',
				imgs:''
				
			};
		},
		//获取传过来得id
		onLoad(op) {
			this.id = op.Id
			this.link = op.link
			this.queylist(op.Id)
		},
		methods: {
			//详情信息
			async queylist(id) {
				// console.log(id, 'id');
				const data = await queryById(id)
				this.obj = data.result
				this.dataLoaded = true
			},
			getList(){
				
			},
			onChanges(e)
			{
				// console.log(e,'eee');
				this.active =  e.detail.index,
				this.getList('classify');
			},
			//返回上一页
			Black(){
				uni.navigateBack()
			},
			Follows(){
				// uni.navigateTo({
				// 	url:'../evaluation/evaluation'
				// })
			},
			
		}
	}
</script>

<style scoped lang="less">
	.pages {
		width: 100%;
		background-color: #F5F5F7;
		// height: 120vh;

		.bg {
			width: 100%;
			height: 20vh;
		}

		.second {
			width: 100%;
			// position: absolute;
			background-color: #F5F5F5;

			.box {
				position: relative;
				top: -20rpx;
				width: 100%;
				height: 402rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;

				.box_center {
					height: 122rpx;
					display: flex;
					justify-content: space-between;
					padding: 20rpx 40rpx 0rpx 40rpx;

					.box_img {
						position: relative;
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						border: 4rpx solid #F5F5F5;
						top: -45px;
					}

					.guanzhu {
						width: 146rpx;
						height: 64rpx;
						background: #FF7F22;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						opacity: 1;
						text-align: center;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 64rpx;
					}
				}

				.box_font {
					margin-left: 44rpx;
					line-height: 55rpx;

					.font_text {
						font-size: 40rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #222229;
					}

					.fonst_l {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.box_footer {
					margin-left: 44rpx;
					line-height: 30rpx;
					margin-top: 50rpx;
					.haop {
						margin-left: 20rpx;
						font-size: 28rpx;

						color: #666666;
					}

					.zixun {
						margin-left: 20rpx;
						

						
					}

					.num {
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						
					}
					.ft{
						margin-left: 13rpx;
						color: #666666;
						font-size: 28rpx;
					}
				}
			}
			.footer{
				background-color: #FFFFFF;
			}
		}
	}
</style>